<template>
  <div id="myChart3" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
import { defineComponent, toRefs, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'BarLineChart',
  setup() {
    const state = reactive({
      option: {
        // title: {
        //   text: '年度同比订单量走势分析',
        //   left: '45%',
        //   textAlign: 'center',
        //   textStyle: {
        //     color: '#fff'
        //   }
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#AFC0D5'
            }
          }
        },
        legend: {
          data: ['类一', '类二', '趋势'],
          textStyle: {
            color: '#AFC0D5',
            fontSize: 12,
          },
          top: '5%'
        },
        xAxis: [
          {
            type: 'category',
            data: ['2019', '2020', '2021', '2022', '2023'],
            axisPointer: {
              type: 'shadow'
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#AFC0D5'
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '类一',
            min: 0,
            max: 250,
            interval: 50,
            nameTextStyle: {
              color: '#058CFF'
            },
            axisLabel: {
              formatter: '{value} ml',
              textStyle: {
                color: '#AFC0D5'
              }
            },
            axisLine: {
              show: true
            },
            splitLine: {     //网格线
              show: false
            }
          },
          {
            type: 'value',
            name: '类二',
            min: 0,
            max: 25,
            interval: 5,
            nameTextStyle: {
              color: '#058CFF'
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#AFC0D5'
              }
            },
            axisLine: {
              show: true
            },
            splitLine: {     //网格线
              show: false
            }
          }
        ],
        series: [
          {
            name: '类一',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            itemStyle: {
              normal: {
                color: '#0DBEFF'
              }
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: '类二',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            itemStyle: {
              normal: {
                color: '#79F6FF'
              }
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
          {
            name: '趋势',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            itemStyle: {
              normal: {
                color: '#00DBFC'
              }
            },
            lineStyle: {
              color: '#43FFBE'
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      },
    })
    const initeCharts = () => {
      let myChart = echarts.init(document.getElementById('myChart3'))
      // 绘制图表
      myChart.setOption(state.option)
    }

    onMounted(() => {
      initeCharts()
    })

    return {
      ...toRefs(state),
    }
  },
})
</script>

<style scoped>

</style>
